.button {
  outline: 0;
  border: 1px solid transparent;
  text-align: center;
  user-select: none;
  cursor: pointer;
  border-radius: $button-radius;

  @include button-size($button-padding-x, $button-height, $button-font-size, $button-min-with);

  @include colors(#fff, transparent, $primary-color);

  // hover和active都是加深 10%
  &:hover, &:active {
    @include colors(#fff, transparent, darken($primary-color, 10%));
  }

  &.button-disabled, &:disabled {
    // TODO: 颜色需要抽离到variables
    @include colors(#fff, transparent, #c4c4c4);
  }
}

// 每个尺寸的按钮大小
.button-xl {
  @include button-size($button-xl-padding-x, $button-xl-height, $button-xl-font-size, $button-xl-min-width);
}

.button-lg {
  @include button-size($button-lg-padding-x, $button-lg-height, $button-lg-font-size, $button-lg-min-width);
}

.button-sm {
  @include button-size($button-sm-padding-x, $button-sm-height, $button-sm-font-size, $button-sm-min-width);
}

.button-xs {
  @include button-size($button-xs-padding-x, $button-xs-height, $button-xs-font-size, $button-xs-min-width);
}

// 长按钮
.button-long {
  width: 100%;
}

// 短按钮，没有min-width
.button-short {
  min-width: auto;
}

// 矩形按钮
.button-rectangle {
  border-radius: 0;
}

.button-round {
  border-radius: $button-xl-height / 2;
}

// 次要按钮
.button-secondary {
  @include colors($primary-color,$primary-color, #fff);

  // hover和active都是加深 10%
  &:hover, &:active {
    @include colors(#fff, transparent, $primary-color);
  }

  ＆.button-disabled, &:disabled {
    @include colors($text-placeholder-color, $module-border-color, #fff);
  }
}

// 每种颜色的按钮
@each $color, $value in $theme-colors {
  .button-#{$color} {
    @include colors(#fff, $value, $value);

    &.button-secondary {
      @include colors($value, $value, #fff);
    }

    // hover和active都是加深 10%
    &:hover, &:active {
      @include colors(#fff, transparent, darken($value, 10%));
    }

    &.button-disabled, &:disabled {
      // TODO: 颜色需要抽离到variables
      background-color: #c4c4c4;
      border-color: #c4c4c4;
    }
  }
}
// 边线按钮
.button-outline {
  @include colors($text-color,  $border-color, #fff);
  &:hover, &:active {
    @include colors($primary-color,  $primary-color, #fff);
  }

  ＆.button-disabled, &:disabled {
    @include colors($text-placeholder-color, $module-border-color, #fff);
  }
}

// 虚线按钮
.button-dashed {
  @extend .button-outline;

  border-color: #a4a4a4;
  border-style: dashed;

  ＆.button-disabled, &:disabled {
    // TODO: 颜色需要抽离到variables
    @include colors($text-placeholder-color, #ddd, #fff);
  }
}

// 文本按钮
.button-text {
  @include colors($link-color, transparent, #fff);
  // 文本按钮不需要padding-left和padding-right
  padding-left: 0;
  padding-right: 0;
  // 取消最小宽度限制
  min-width: auto;

  &:hover, &:active {
    @include colors($primary-color, transparent, #fff);
  }

  ＆.button-disabled, &:disabled {
    @include colors($text-placeholder-color, transparent, #fff);
  }
}

// 修复实际项目中的兼容性bug
.button {
  // 覆盖 .panel-clue button { color: #262626 }
  &.button-primary {
    color: #fff;
  }
}
